<!--
 * @Description: 
 * @Author: huxianc
 * @Date: 2020-12-07 15:46:01
 * @LastEditors: huxianc
 * @LastEditTime: 2020-12-09 13:56:39
-->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>个人评估功能模块</title>
    <link rel="stylesheet" href="./fonts/iconfont/iconfont.css" />
    <link rel="stylesheet" href="./css/reset.css" />
    <link rel="stylesheet" href="./css/common.css" />
    <link rel="stylesheet" href="./css/index.css" />
  </head>
  <body>
    <div class="broswerInfo">
      <span
        >推荐浏览器:<a
          href="http://www.google.cn/intl/zh-CN/chrome/browser/desktop/index.html"
          target="_blank"
          >Chrome</a
        ></span
      >
      <span>最佳分辨率:1920*1080(全屏)</span>
      <span
        >技术支持:<a href="http://www.handongchina.com/" target="_blank"
          >翰东科技</a
        ></span
      >
    </div>
    <!--视频背景开始，根据实际情况启用-->
    <div
      style="
        width: 100%;
        height: 100%;
        min-width: 1280px;
        position: absolute;
        opacity: 0.8;
        z-index: -2;
      "
    >
      <video
        id="myVideo"
        style="width: 100%; height: 100%; object-fit: fill"
        muted="muted"
        autoplay="autoplay"
        loop="loop"
      >
        <source src="./video/bg09.mp4" type="video/mp4" />
        Your browser does not support HTML5 video.
      </video>
    </div>
    <header>
      <div class="title-container">
        <img src="./images/badge.png" alt="" />
        <span class="title-content">个人评估功能模块</span>
      </div>
      <div class="date-container">
        <div class="date-box">
          <div class="day"></div>
          <div class="date"></div>
        </div>
        <div class="time-box"></div>
      </div>
    </header>
    <main>
      <!-- 上 -->
      <div class="top-container">
        <!-- 上左 -->
        <div class="t-l-container">
          <div class="box-title">
            <span>基本情况</span>
          </div>
          <div class="img-container">
            <img src="./images/badge.png" alt="" srcset="" />
            <div class="level hidden">级别：1232sadfdasfsa2131321321321da1</div>
          </div>
          <div class="paragraph-container">
            <div class="paragraph-title">
              <span> 罪犯标签 </span>
            </div>
            <div class="paragraph-content">
              <span class="chrome-hidden chrome-hidden-2">
                有暴力倾向、有自杀倾向、爱惹是生非、口蜜腹剑、斤斤计较有暴力倾向、有自杀倾向、爱惹是生非、口蜜腹剑、斤斤计较有暴力倾向、有自杀倾向、爱惹是生非、口蜜腹剑、斤斤计较有暴力倾向、有自杀倾向、爱惹是生非、口蜜腹剑、斤斤计较
              </span>
            </div>
          </div>
          <div class="paragraph-container">
            <div class="paragraph-title">关注警官</div>
            <div class="paragraph-content">
              <div class="star-container">
                <span class="iconfont icon-star1"></span>
                <div class="star-name hidden">杨警官</div>
              </div>
              <div class="star-container">
                <span class="iconfont icon-star"></span>
                <div class="star-name hidden">杨警官</div>
              </div>
              <div class="star-container">
                <span class="iconfont icon-star"></span>
                <div class="star-name hidden">杨警官</div>
              </div>
              <div class="star-container">
                <span class="iconfont icon-star"></span>
                <div class="star-name hidden">杨警官</div>
              </div>
            </div>
          </div>
        </div>
        <!-- 上中 -->
        <div class="t-c-container">
          <div class="box-title">
            <span>得分统计</span>
          </div>
          <div class="t-c-chart-container">
            <div class="t-chart">
              <!-- 水球图 -->
              <div id="liquid"></div>
              <!-- 折线图 -->
              <div id="line"></div>
            </div>
            <div class="b-chart">
              <!-- 基础情况 -->
              <div class="pie-item-container">
                <div class="pie-chart" id="pie1"></div>
                <div class="pie-title">基础情况</div>
              </div>
              <!-- 危险程度 -->
              <div class="pie-item-container">
                <div class="pie-chart" id="pie2"></div>
                <div class="pie-title">危险程度</div>
              </div>
              <!-- 服刑能力 -->
              <div class="pie-item-container">
                <div class="pie-chart" id="pie3"></div>
                <div class="pie-title">服刑能力</div>
              </div>
              <!-- 改造难度 -->
              <div class="pie-item-container">
                <div class="pie-chart" id="pie4"></div>
                <div class="pie-title">改造难度</div>
              </div>
              <!-- 动态信息 -->
              <div class="pie-item-container">
                <div class="pie-chart" id="pie5"></div>
                <div class="pie-title">动态信息</div>
              </div>
              <!-- 预警信息 -->
              <div class="pie-item-container">
                <div class="pie-chart" id="pie6"></div>
                <div class="pie-title">预警信息</div>
              </div>
            </div>
          </div>
        </div>
        <!-- 上右 -->
        <div class="t-r-container">
          <!-- 上右上 -->
          <div class="t-r-t-container">
            <div class="t-r-t-l-container">
              <div class="box-title">
                <span>评估图析</span>
              </div>
              <div class="radar-container" id="radar">雷达</div>
            </div>
            <div class="t-r-t-r-container">
              <div class="box-title">
                <span>历史评估</span>
                <div class="operate-menu">
                  <img src="./images/up.png" id="but_up05" alt="" />
                  <img src="./images/down.png" id="but_down05" alt="" />
                </div>
              </div>

              <div id="scrollBox05">
                <ul>
                  <li class="label-container">
                    <div class="label-title">
                      <span class="title">【入监评估】</span>
                      <span class="date">2019-5-31</span>
                    </div>
                    <div class="label-content hidden">
                      被评估为：A3，风险点：其他，自杀，暴力。
                    </div>
                  </li>
                  <li class="label-container">
                    <div class="label-title">
                      <span class="title">【中期评估】</span>
                      <span class="date">2019-5-31</span>
                    </div>
                    <div class="label-content hidden">
                      被评估为：A3，风险点：其他，自杀，暴力。
                    </div>
                  </li>
                  <li class="label-container">
                    <div class="label-title">
                      <span class="title">【中期评估】</span>
                      <span class="date">2019-5-31</span>
                    </div>
                    <div class="label-content hidden">
                      被评估为：A3，风险点：其他，自杀，暴力。
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <!-- 上右下 -->
          <div class="t-r-b-container">
            <div class="box-title">
              <span>社会支持</span>
            </div>
            <div class="bar-container" id="bar"></div>
          </div>
        </div>
      </div>
      <!-- 下 -->
      <div class="bottom-container">
        <!-- 下左 -->
        <div class="b-l-container">
          <div class="box-title">
            <span>详细信息</span>
          </div>

          <div class="detail-container">
            <div class="line">
              <div class="col">
                <div class="hidden">姓名：张三</div>
              </div>
              <div class="col">
                <div class="hidden">性别：男</div>
              </div>
              <div class="col">
                <div class="hidden">年龄：34</div>
              </div>
              <div class="col">
                <div class="hidden">出生日期：1985-01-18</div>
              </div>
              <div class="col">
                <div class="hidden">名族：汉</div>
              </div>
            </div>
            <div class="line">
              <div class="col">
                <div class="hidden">籍贯：四川省 都江堰市</div>
              </div>
              <div class="col col-4">
                <div class="hidden">
                  家庭住址：四川省 都江堰市崇义镇大桥村十组
                </div>
              </div>
            </div>
            <div class="line">
              <div class="col">
                <div class="hidden">捕前面貌：群众</div>
              </div>
              <div class="col">
                <div class="hidden">捕前文化：小学</div>
              </div>
              <div class="col">
                <div class="hidden">捕前职业：无业</div>
              </div>
              <div class="col">
                <div class="hidden">婚姻原：暂无</div>
              </div>
              <div class="col">
                <div class="hidden">特长：暂无信息</div>
              </div>
            </div>
            <div class="line">
              <div class="col col-2">
                <div class="hidden">罪名：制造毒品、非法持有枪支</div>
              </div>
              <div class="col">
                <div class="hidden">刑期：死缓</div>
              </div>
              <div class="col">
                <div class="hidden">刑期起日：2019-04-30</div>
              </div>
              <div class="col">
                <div class="hidden">刑期止日：1900-01-01</div>
              </div>
            </div>
            <div class="line">
              <div class="col">
                <div class="hidden">所在监区：一监区</div>
              </div>
              <div class="col">
                <div class="hidden">入监日期：2019-05-14</div>
              </div>
              <div class="col">
                <div class="hidden">档案号：5120014416</div>
              </div>
              <div class="col">
                <div class="hidden">原类别：重大刑事犯</div>
              </div>
              <div class="col">
                <div class="hidden">现类别：重大刑事犯</div>
              </div>
            </div>
            <div class="line">
              <div class="col">
                <div class="hidden">分管等级：考察级</div>
              </div>
              <div class="col">
                <div class="hidden">分押类型：涉毒型</div>
              </div>
              <div class="col">
                <div class="hidden">罚金：￥999999999</div>
              </div>
              <div class="col">
                <div class="hidden">前科次数：1</div>
              </div>
              <div class="col">
                <div class="hidden">团伙：3</div>
              </div>
            </div>
            <div class="line">
              <div class="col">
                <div class="hidden">累惯犯：——</div>
              </div>
              <div class="col">
                <div class="hidden">流窜类别：——</div>
              </div>
              <div class="col col-3">
                <div class="process-container">
                  服刑进度:
                  <div class="process-box">
                    <div class="process-content">
                      <div class="inner-text">70%</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 下中 -->
        <div class="b-c-container">
          <div class="b-c-item-container">
            <div class="box-title">
              <span>社会关系</span>
              <div class="operate-menu">
                <img src="./images/up.png" id="but_up01" alt="" />
                <img src="./images/down.png" id="but_down01" alt="" />
              </div>
            </div>
            <div class="table-box">
              <div class="table-line-title">
                <div class="table-td">
                  <div class="table-cell">关系</div>
                </div>
                <div class="table-td">
                  <div class="table-cell">姓名</div>
                </div>
                <div class="table-td">
                  <div class="table-cell">年龄</div>
                </div>
                <div class="table-td">
                  <div class="table-cell">家庭住址</div>
                </div>
              </div>
              <div class="table-line-container" id="scrollBox01">
                <ul>
                  <li class="table-line">
                    <div class="table-td">
                      <div class="table-cell">父亲</div>
                    </div>
                    <div class="table-td">
                      <div class="table-cell">魏俊生</div>
                    </div>
                    <div class="table-td">
                      <div class="table-cell">66</div>
                    </div>
                    <div class="table-td">
                      <div class="table-cell">崇义镇大桥村十组</div>
                    </div>
                  </li>
                  <li class="table-line">
                    <div class="table-td">
                      <div class="table-cell">父亲1</div>
                    </div>
                    <div class="table-td">
                      <div class="table-cell">魏俊生</div>
                    </div>
                    <div class="table-td">
                      <div class="table-cell">66</div>
                    </div>
                    <div class="table-td">
                      <div class="table-cell">崇义镇大桥村十组</div>
                    </div>
                  </li>
                  <li class="table-line">
                    <div class="table-td">
                      <div class="table-cell">父亲2</div>
                    </div>
                    <div class="table-td">
                      <div class="table-cell">魏俊生</div>
                    </div>
                    <div class="table-td">
                      <div class="table-cell">66</div>
                    </div>
                    <div class="table-td">
                      <div class="table-cell">崇义镇大桥村十组</div>
                    </div>
                  </li>
                  <li class="table-line">
                    <div class="table-td">
                      <div class="table-cell">父亲3</div>
                    </div>
                    <div class="table-td">
                      <div class="table-cell">魏俊生</div>
                    </div>
                    <div class="table-td">
                      <div class="table-cell">66</div>
                    </div>
                    <div class="table-td">
                      <div class="table-cell">崇义镇大桥村十组</div>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="b-c-item-container">
            <div class="box-title">
              <span>前科劣迹</span>
              <div class="operate-menu">
                <img src="./images/up.png" id="but_up02" alt="" />
                <img src="./images/down.png" id="but_down02" alt="" />
              </div>
            </div>
            <div class="table-box">
              <div class="table-line-title">
                <div class="table-td">
                  <div class="table-cell">罪名</div>
                </div>
                <div class="table-td">
                  <div class="table-cell">刑期</div>
                </div>
                <div class="table-td">
                  <div class="table-cell">起日-止日</div>
                </div>
                <div class="table-td">
                  <div class="table-cell">关押地点</div>
                </div>
              </div>

              <div class="table-line-container" id="scrollBox02">
                <ul>
                  <li class="table-line">
                    <div class="table-td">
                      <div class="table-cell">父亲</div>
                    </div>
                    <div class="table-td">
                      <div class="table-cell">魏俊生</div>
                    </div>
                    <div class="table-td">
                      <div class="table-cell">66</div>
                    </div>
                    <div class="table-td">
                      <div class="table-cell">崇义镇大桥村十组</div>
                    </div>
                  </li>
                  <li class="table-line">
                    <div class="table-td">
                      <div class="table-cell">父亲1</div>
                    </div>
                    <div class="table-td">
                      <div class="table-cell">魏俊生</div>
                    </div>
                    <div class="table-td">
                      <div class="table-cell">66</div>
                    </div>
                    <div class="table-td">
                      <div class="table-cell">崇义镇大桥村十组</div>
                    </div>
                  </li>
                  <li class="table-line">
                    <div class="table-td">
                      <div class="table-cell">父亲2</div>
                    </div>
                    <div class="table-td">
                      <div class="table-cell">魏俊生</div>
                    </div>
                    <div class="table-td">
                      <div class="table-cell">66</div>
                    </div>
                    <div class="table-td">
                      <div class="table-cell">崇义镇大桥村十组</div>
                    </div>
                  </li>
                  <li class="table-line">
                    <div class="table-td">
                      <div class="table-cell">父亲3</div>
                    </div>
                    <div class="table-td">
                      <div class="table-cell">魏俊生</div>
                    </div>
                    <div class="table-td">
                      <div class="table-cell">66</div>
                    </div>
                    <div class="table-td">
                      <div class="table-cell">崇义镇大桥村十组</div>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="b-c-item-container">
            <div class="box-title">
              <span>刑罚变动</span>
              <div class="operate-menu">
                <img src="./images/up.png" id="but_up03" alt="" />
                <img src="./images/down.png" id="but_down03" alt="" />
              </div>
            </div>
            <div class="table-box">
              <div class="table-line-title">
                <div class="table-td">
                  <div class="table-cell">判决机关</div>
                </div>
                <div class="table-td">
                  <div class="table-cell">判决字号</div>
                </div>
                <div class="table-td">
                  <div class="table-cell">起日-止日</div>
                </div>
                <div class="table-td">
                  <div class="table-cell">刑期</div>
                </div>
              </div>
              <div class="table-line-container" id="scrollBox03">
                <ul>
                  <li class="table-line">
                    <div class="table-td">
                      <div class="table-cell">父亲</div>
                    </div>
                    <div class="table-td">
                      <div class="table-cell">魏俊生</div>
                    </div>
                    <div class="table-td">
                      <div class="table-cell">66</div>
                    </div>
                    <div class="table-td">
                      <div class="table-cell">崇义镇大桥村十组</div>
                    </div>
                  </li>
                  <li class="table-line">
                    <div class="table-td">
                      <div class="table-cell">父亲1</div>
                    </div>
                    <div class="table-td">
                      <div class="table-cell">魏俊生</div>
                    </div>
                    <div class="table-td">
                      <div class="table-cell">66</div>
                    </div>
                    <div class="table-td">
                      <div class="table-cell">崇义镇大桥村十组</div>
                    </div>
                  </li>
                  <li class="table-line">
                    <div class="table-td">
                      <div class="table-cell">父亲2</div>
                    </div>
                    <div class="table-td">
                      <div class="table-cell">魏俊生</div>
                    </div>
                    <div class="table-td">
                      <div class="table-cell">66</div>
                    </div>
                    <div class="table-td">
                      <div class="table-cell">崇义镇大桥村十组</div>
                    </div>
                  </li>
                  <li class="table-line">
                    <div class="table-td">
                      <div class="table-cell">父亲3</div>
                    </div>
                    <div class="table-td">
                      <div class="table-cell">魏俊生</div>
                    </div>
                    <div class="table-td">
                      <div class="table-cell">66</div>
                    </div>
                    <div class="table-td">
                      <div class="table-cell">崇义镇大桥村十组</div>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <!-- 下右 -->
        <div class="b-r-container">
          <div class="b-r-t-container">
            <div class="box-title">
              <span>改造方案</span>
            </div>

            <div class="paragraph-container">
              <div class="paragraph-title">方案标题</div>
              <div class="paragraph-content">
                <span class="chrome-hidden chrome-hidden-3">
                  于是在风口之后，留下了令人唏嘘的一场泡沫。所以如何“维温”，以及系统性地打造明星直播来重获消费者信任，成为了各家平台在中场战役里的“攻坚”重点。
                </span>
              </div>
            </div>
          </div>
          <div class="b-r-b-container">
            <div class="box-title">
              <span>罪犯近况</span>
              <div class="operate-menu">
                <img src="./images/up.png" id="but_up04" alt="" />
                <img src="./images/down.png" id="but_down04" alt="" />
              </div>
            </div>

            <!-- 空的时候 class 加 empty -->
            <div class="near-container">
              <!-- 空的时候 显示这个image -->
              <!-- <img src="./images/empty.png"> -->
              <div id="scrollBox04">
                <ul>
                  <li class="label-container">
                    <div class="label-title">
                      <span class="title hidden">事件标题</span>
                      <span class="date">2019-5-31</span>
                    </div>
                    <div class="label-content">
                      <span class="chrome-hidden chrome-hidden-2">
                        于是在风口之后，留下了令人唏嘘的一场泡沫。所以如何“维温”，以及系统性地打造明星直播来重获消费者信任，成为了各家平台在中场战役里的“攻坚”重点。
                      </span>
                    </div>
                  </li>
                  <li class="label-container">
                    <div class="label-title">
                      <span class="title hidden">事件标题</span>
                      <span class="date">2019-5-31</span>
                    </div>
                    <div class="label-content">
                      <span class="chrome-hidden chrome-hidden-2">
                        于是在风口之后，留下了令人唏嘘的一场泡沫。所以如何“维温”，以及系统性地打造明星直播来重获消费者信任，成为了各家平台在中场战役里的“攻坚”重点。
                      </span>
                    </div>
                  </li>
                  <li class="label-container">
                    <div class="label-title">
                      <span class="title hidden">事件标题</span>
                      <span class="date">2019-5-31</span>
                    </div>
                    <div class="label-content">
                      <span class="chrome-hidden chrome-hidden-2">
                        于是在风口之后，留下了令人唏嘘的一场泡沫。所以如何“维温”，以及系统性地打造明星直播来重获消费者信任，成为了各家平台在中场战役里的“攻坚”重点。
                      </span>
                    </div>
                  </li>
                  <li class="label-container">
                    <div class="label-title">
                      <span class="title hidden">事件标题</span>
                      <span class="date">2019-5-31</span>
                    </div>
                    <div class="label-content">
                      <span class="chrome-hidden chrome-hidden-2">
                        于是在风口之后，留下了令人唏嘘的一场泡沫。所以如何“维温”，以及系统性地打造明星直播来重获消费者信任，成为了各家平台在中场战役里的“攻坚”重点。
                      </span>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
    <!-- loading -->
    <div class="loading-container">
      <img src="./images/loading.gif" alt="" />
    </div>
    <!-- dialog -->
    <div class="dialog-container" id="dialog">
      <div class="dialog-box">
        <div class="dialog-header">
          <div class="dialog-title">标签调整</div>
          <span class="close-btn" id="close_btn">X</span>
        </div>
        <div class="dialog-body">
          111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
          <div class="dialog-btn-container">
            <div class="dialog-btn">确认</div>
          </div>
        </div>
      </div>
    </div>

    <script src="./js/jquery-1.9.1.min.js"></script>
    <script src="./plugins/echarts/echarts.min.js"></script>
    <script src="./plugins/echarts/echarts-liquidfill.min.js"></script>

    <script src="./js/index.js"></script>
    <script src="./js/chart.js"></script>
  </body>
</html>
